<template>
  <div>
    <div class="app-container clearfix pageHeader">
      <div class="header fl">授权：{{$store.getters.currentId.parentName}} - {{$store.getters.currentId.name}}</div>
      <div class="extra fr">
        <el-button @click="back">返回</el-button>
      </div>
    </div>



    
    <div class="app-container margin-content padding-content">
      <el-row :gutter="16">
        <!--菜单权限-->
        <el-col :sm="24" :md="12">
          <el-card>
            <div slot="header">菜单权限</div>
            <el-scrollbar :native="false" wrap-class="scroll-list">
              <div style="height: 469px;">
                <el-tree :data="menu" ref="menu" show-checkbox node-key="id" @check="checkHandle"
                         :default-expand-all="true" :props="defaultProps" :check-strictly=true>
                </el-tree>
              </div>
            </el-scrollbar>
          </el-card>
        </el-col>
        <!--数据权限-->
        <el-col :sm="24" :md="12">
          <el-card>
            <div slot="header">数据权限</div>
            <el-scrollbar :native="false" wrap-class="scroll-list">
              <div style="height: 469px;">
                <el-tree :data="port" ref="port" show-checkbox node-key="id" :default-expand-all="true"
                         :props="defaultProps">
                </el-tree>
              </div>
            </el-scrollbar>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div style="height: 86px;"></div>
    <div class="app-container padding-content fixed fixed-wrapper fixed-bottom"
         style="margin-bottom: 0; text-align: right">
      <el-button @click="reset">重置</el-button>
      <el-button type="primary" @click="handlerSubmit">保存</el-button>
    </div>
  </div>
</template>

<script>
  // api
  import { listRouter } from '@/api/menus'
  import { getPortTree, updateRolePorts, updateRoleRouter, getPortsAndRouters } from '@/api/roles'

  // components

  export default {
    name: 'auth',
    data() {
      return {
        menu: [],
        port: [],
        id: this.$store.getters.currentId.id,
        menuSelections: null,
        portSelections: null,
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    },
    created() {
      this.listRouter()
      this.getPortTree()
      this.getPortsAndRouters()
    },
    methods: {
      getPortsAndRouters() {
        getPortsAndRouters({id: this.id}).then(res => {
          res = res.data
          const menuIds = res.data.routers.map((item) => {
            return item.id
          })
          this.$refs['menu'].setCheckedKeys(menuIds)
          const portIds = res.data.ports.map((item) => {
            return item.id
          })
          this.$refs['port'].setCheckedKeys(portIds)
        })
      },
      listRouter() {
        listRouter().then((res) => {
          this.menu = res.data.data
//          const ids = this.menu.map((item) => {
//            return item.id
//          })
//          this.$refs['menu'].setCheckedKeys(ids)
        })
      },
      getPortTree() {
        getPortTree().then((res) => {
          this.port = res.data.data
//          const ids = this.menu.map((item) => {
//            return item.id
//          })
//          this.$refs['port'].setCheckedKeys(ids)
        })
      },
      checkHandle(current, checked) {
        console.log(checked)
      },
      getMenuCheckedNodes() {
        this.menuSelections = this.$refs.menu.getCheckedNodes()
        this.menuSelections = this.menuSelections.map(item => {
          return item.id
        })
      },
      getPortCheckedNodes() {
        this.portSelections = this.$refs.port.getCheckedNodes()
        this.portSelections = this.portSelections.map(item => {
          return item.id
        })
      },
      back() {
        this.$parent.back()
      },
      reset() {
        this.$refs.port.setCheckedKeys([])
        this.$refs.menu.setCheckedKeys([])
      },
      handlerSubmit() {
        this.getMenuCheckedNodes()
        this.getPortCheckedNodes()
        updateRoleRouter({id: this.id, routerIds: this.menuSelections.join(',')}).then(res => {
          updateRolePorts({id: this.id, portIds: this.portSelections.join(',')}).then(subRes => {
            this.$message({message: '操作成功', type: 'success'})
            this.listRouter()
            this.getPortTree()
            this.getPortsAndRouters()
          })
        })
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped="scope">
  .el-card {
    margin-top: 5px;
  }
</style>
